<template>
  <div>
    <v-chart class="chart" :option="option" />
    <ul v-for="(v, k) in y1" :key="'item' + k">
      <li>
        {{ v }} ========= {{ y2[k] }}
      </li>
    </ul>
  </div>
</template>

<script>

function fib(n) {
  let a = 1;
  let b = 1;
  let c = 1;
  let i = 2;
  while (i++ < n) {
    c = a + b;
    a = b;
    b = c;
  }
  return c;
}

function fastFib(n) {
  let phi = (1 + Math.sqrt(5)) / 2.0;
  let mu = (1 - Math.sqrt(5)) / 2.0;
  return (Math.pow(phi, n) - Math.pow(mu, n)) / Math.sqrt(5);
}

var X = [];
var Y1 = [];
var Y2 = [];
for (let i = 1; i < 30; i++) {
  X.push(i);
  Y1.push(fib(i));
  Y2.push(fastFib(i));
}

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import {LineChart} from "echarts/charts";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
  LineChart,
  LegendComponent
]);

export default {
  name: "Fibonacci",
  components: {
    VChart
  },
  data() {
    return {
      xs: X,
      y1: Y1,
      y2: Y2,
      option: {
        xAxis: {
          type: 'category',
          data: X,
        },
        yAxis: {
          type: 'value'
        },
        series: [
            {
              itemStyle: {color: "red"},
              data: Y1,
              type: 'line'
            },
          {
            itemStyle: {color: "blue"},
            data: Y2,
            type: 'line'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.chart {
  width: 500px;
  height: 500px;
}
</style>